<script setup lang="ts">
import WebNotice from '@/components/webNotice/index.vue'
import HomeCarousel from '@/components/home/carousel/index.vue'
import SecondRecommend from '@/components/home/topic/index.vue'
import HomePost from '@/components/home/post/index.vue'
import {onBeforeMount, ref} from "vue";
import {recorderBehavior} from "@/api/system/system";
import {commonConsoleLog, ECode} from "@/util/commonUtil";

const isFirstRecommendShow = ref<boolean>(true)
const isSecondRecommendShow = ref<boolean>(true)

onBeforeMount(() => {
  // 3S后埋点信息上报
  setTimeout(() => {
    recorderBehavior({'otherData': '首页', 'behavior': 'VISIT_PAGE'}).then((response: any) => {
      if (response.code == ECode.SUCCESS) {
        commonConsoleLog('首页信息上报成功')
      }
    })
  }, 3000)
})

function getFirstRecommendShow(callBack: boolean) {
  isFirstRecommendShow.value = callBack
}

function getSecondRecommendShow(callBack: boolean) {
  isSecondRecommendShow.value = callBack
}
</script>

<template>
  <div class="home">
    <article class="max-w-screen-xl m-auto mt-4">
      <header class="home-header">
        <a-row :gutter="[16,16]">
          <a-col :span="16">
            <!-- 一级推荐 -->
            <HomeCarousel @isFirstRecommendShow="getFirstRecommendShow" v-if="isFirstRecommendShow"/>
          </a-col>
          <a-col :span="8">
            <!-- 二级推荐 -->
            <SecondRecommend @isSecondRecommendShow="getSecondRecommendShow" v-if="isSecondRecommendShow"/>
          </a-col>
        </a-row>
      </header>
      <!--首页文章分类-->
      <HomePost/>
    </article>
    <WebNotice/>
  </div>
</template>

<style lang="less" scoped>
.home{
  background: var(--bg-primary);
}

@media (max-width: 1024px) {
  :deep(.ant-col.ant-col-16 ) {
    width: 100%;
    flex: 1;
    max-width: 100%;
    padding-inline: 1rem;
  }

  :deep(.ant-col.ant-col-8 ) {
    display: none;
  }
}
</style>
